<template>
    <panel title="新品推荐">
        <section class="content">
            <div class="arrow">更多产品>></div>
            <slider :options="options" :items="items" cname="product-slider"></slider>  
        </section>
    </panel>
</template>

<script>
import Panel from "@/components/panel"
import Slider from "@/components/Slider"
export default {
    name: 'Product',
    components: {
        Panel,
        Slider
    },
    data() {
        return {
            options: {
            //    pagination: {
            //         el: '.swiper-pagination',
            //         clickable: true
            //     },
               slidesPerView: 2.3,
               spaceBetween: 30,
               freeMode: true 
            },
            items: [
                {
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/09/19/2e230b84-0259-44e3-a8af-1787b530d340.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/09/19/43b6f523-9010-4f21-9a20-981e8fd2f7a8.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/10/25/e089566a-f02a-4519-9d9e-d70eb38cbcf7.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/11/02/fd67a7ef-4945-45eb-a45e-2c9ee9180d05.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/09/29/c4ab2ad9-bdc9-4cd9-8326-eb97d38e589a.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/10/15/55b37ca3-408b-4618-b14a-861d37a21437.jpg"
                }]
        }
    }
}
</script>
<style lang="scss">
    @import '~assets/scss/element.scss';
    .panel{
        @include panel;
        .content{
            padding-bottom: .4rem;
            position: relative;
            .arrow{
                position: absolute;
                right: .18rem;
                top: -.66rem;
                font-size: .20rem;
                color: #999;
            }
            .product-slider{
                .swiper-container{
                    box-sizing: border-box;
                    padding: 0 .24rem;
                    .swiper-slide{
                        a{
                            display: inline-block;
                            width: 100%;
                            img{
                                width: 100%;
                                display: block;
                                height: 3.14rem;
                                border: 1px solid #fafafa;
                            }
                        }
                    }
                }
            }
        }
    }
    
</style>



